<template>
	<div class="contact-del">
		<div class="header">
			<div class="user-list">
				<ul v-if="seletedContacts.length>0">
					<li v-for="item in seletedContacts">
						<div class="user-name">{{item.name}}</div>
					</li>
				</ul>
				<div class="no-list" v-else>
					请选择联系人
				</div>
			</div>
		</div>
		<div class="section">
			<div class="section-container">
				<ul>
					<li v-for="item in contactItems">
						<label>
						<dl class="group-column-3">
							<dd class="group-column">
								<div class="checkbox-1" v-if="cache.mobile != item.regMobile">
									<input type="checkbox" v-model="seletedContacts" :value="item">
									<span></span>
								</div>
								<div class="checkbox-1 unable" v-else>
									<input type="checkbox" disabled>
									<span></span>
								</div>

							</dd>
							<dd class="group-column"><i class="icon-contactAvatar"></i></dd>
							<dd class="group-column">{{item.name}}</dd>
						</dl>
						</label>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer">
			<button class="btn btn-submit"
				@click="del"
			 	v-if="seletedContacts.length>0">
			 	确定{{'('+seletedContacts.length+')'}}
			</button>
			<button class="btn btn-submit unable" v-else>确定</button>
		</div>
	</div>
</template>

<script>
export default {

  name: 'contact_del',

  data () {
    return {
    	contactItems: [],
    	seletedContacts: []
    };
  },

  created () {
  	this.getContactList(0, 10000);
    fxAPI.api('setAppTitle', {title: '选择联系人'});
  },

  methods: {
  	getContactList (offset, rowCount) {
  		this.$http.post(this.api.eab, {
			module: 'department',
			action: 'getDepartmentContactList',
			departmentId: this.$route.params.departmentId,
			offset: offset,
			rowCount: rowCount
		}, {showLoading: true}).then(
			res => {
				if (res.body.result === 1) {
					this.seletedContacts = [];
					this.contactItems = res.body.data.contactList;
				}
			}
		);
	},

	del () {
		let contactIds = [];
		this.seletedContacts.forEach(v => {
			contactIds.push(v.contactId);
		});
		this.$http.post(this.api.eab, {
			module: 'contact',
			action: 'deleteContactList',
	  		contactIds: contactIds
		}, {showLoading: true}).then(
			res => {
				if (res.body.result === 1) {
					// this.$toasted.show(res.body.errorMsg);
                    vm.$toast.show({
                        text:res.body.errorMsg,
                        translate:true
                    })
					this.getContactList(0, 10000);
				}
			}
		);
	}
  }
};
</script>

<style lang="scss" scoped>
	@import '../scss/mixin.scss';
	.contact-del{
		@include app-top-main-bottom(110px, 100px);

		.header{
			.user-list{
				width: 100%;
				height: 100px;
				background: #fff;

				ul{
					font-size: 0;
					overflow: auto;
					white-space: nowrap;

					li{
						position: relative;
						display: inline-block;
						font-size: 24px;
						width: 100px;

						.user-name{
							margin: 15px;
							width: 70px;
							height: 70px;
							line-height: 70px;
							border: 1px solid #30c5c3;
							border-radius: 40px;
							text-align: center;
							@include text-ellipsis();
							animation: fadeInScale .2s;
						}

						@keyframes fadeInScale {
							0% {
								transform: scale(0);
							}
							100 {
								transform: scale(1);
							}
						}

					}
				}

				.no-list{
					width: 100%;
					text-align: center;
					line-height: 100px;
					font-size: 24px;
					color: #ccc;
				}
			}
		}

		.group-column-3{
			@include group-column-3(100px, 60px, 580px);
			font-size: 24px;
			background: #fff;

			.group-column:first-child:after,
			.group-column:nth-child(2):after{
				border-bottom: none;
			}
			.group-column:last-child{
				text-align: left;
				font-size: 28px;
				text-indent: 10px;
			}
		}

		.footer{
			box-shadow: 0 0 8px 2px #CCC;
		}
	}
</style>
